/**计算机成绩管理 */
<template>
  <div>
      <condition-card @reset="resetSearch" @search="onSearch" label-position="right" label-width="150px">
        <el-row :gutter="24" style="height: 50px;">
          <el-col :span="8">
            <el-form-item :label="$t('englishScoreManage.semester')">
              <CalendarSelect v-model="queryForm.condition.calendarId" @load-done="loadDone" @input='changeInput'></CalendarSelect>
            </el-form-item>
          </el-col>
        </el-row>
      </condition-card>
      <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
        <h1 class="condition-title">{{$t('computerManagement.management')}}</h1>
        <div class="edu-opertion-bar sub-title">
        <div class="float-left">
          <el-input
            v-model.trim="queryForm.condition.student"
            :placeholder="$t('computerManagement.nameSearch')"
            style="width:250px"
            @keyup.enter.native="onSubmit">
              <i slot="suffix"
                class="el-icon-search"
                style="margin-top:10px;cursor:pointer"
                @click="onSubmit">
              </i>
          </el-input>
          </div>
          <div class="float-right" style="display: flex;">
            <el-button v-premit="'import_xin'" type="primary" @click="exportLead">{{$t('englishScoreManage.lead')}}</el-button>
          </div>
        </div>
        <edu-table :pagination="false" :selection='false' :tooltipEffect="tooltipEffect" stripe :data="dataList" size="mini" @selection-change="handleSelectionChange">
          <edu-table-column :label="$t('computerManagement.registraNo')" prop="writtenSignUpNo"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.registraNumber')" prop="writtenExamCardNo"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.name')" prop="studentName"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.idNumber')" prop="idCardNo"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.schoolName')" prop="writtenSignUpSchool"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.campus')" prop="writtenSignUpCampus"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.institution')" prop="collegeAcademy"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.examineeType')" prop="examStudentType"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.academicDegrees')" prop="subject"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.eductional')" prop="educationalSystem"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.enrollmentYear')" prop="entranceYear"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.nameMajor')" prop="major" ></edu-table-column>
          <edu-table-column :label="$t('computerManagement.classGrade')" prop="className" ></edu-table-column>
          <edu-table-column :label="$t('computerManagement.studentNumber')" prop="studentId" ></edu-table-column>
          <edu-table-column :label="$t('computerManagement.subject')" prop="writtenSubjectName"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.knowledge')" prop="knowledge"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.practice')" prop="practice" ></edu-table-column>
          <edu-table-column :label="$t('computerManagement.performance')" prop="score" ></edu-table-column>
          <edu-table-column :label="$t('computerManagement.orderMerit')" prop="rank"></edu-table-column>
          <edu-table-column :label="$t('computerManagement.certificateNumber')" prop="certificate"></edu-table-column>
        </edu-table>
        <el-row type="flex" class="row-bg" justify="end">
          <el-col>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryForm.pageNum_"
                :page-sizes="[20, 40, 80, 100]"
                :page-size="queryForm.pageSize_"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryForm.total_"
                style="float:right;margin-top:10px"
              ></el-pagination>
          </el-col>
        </el-row>
      </el-card>
      <el-dialog
        :title="$t('englishScoreManage.listRmport')"
        :visible.sync="listRmportVisible"
        width="30%"
        :close-on-click-modal='false'
        :before-close="cancelRmport">
        <el-form ref="queryFormRmport" :rules="rulesRmport" :model="queryFormRmport" label-width="80px">
            <el-form-item :label="$t('englishScoreManage.semester')" prop="calendarId">
              <CalendarSelect v-model="queryFormRmport.calendarId" @load-done="loadDoneRmport" @input='changeInputRmport'></CalendarSelect>
            </el-form-item>
            <el-form-item :label="$t('englishScoreManage.lead')" prop="enclosureFileName">
              <el-upload
                class="upload-demo"
                v-model="queryFormRmport.enclosureFileName"
                action=""
                :http-request='changeRequest'
                :headers="{'X-Token': $store.state.session.sessionid}"
                :data="{bucketname: 'face', folderpath: 'file'}"
                :on-change="handleChange"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :auto-upload='false'
                :limit="1"
                ref='uploadLead'
                :file-list="fileList">
                <el-button size="small" type="primary">{{$t('englishScoreManage.selectFile')}}</el-button>
                <div slot="tip" class="el-upload__tip">{{$t('requirement.attachment')}}</div>
              </el-upload>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelRmport">{{$t('studentsRegist.cancel')}}</el-button>
          <el-button type="primary" @click="reliableRmport">{{$t('englishScoreManage.confirm')}}</el-button>
        </span>
      </el-dialog>

      <edu-export-dialog
        :disabled="exportButton"
        :title="$t('message.prompt')"
        ref="downloadRef"
        :data="exportResult">
      </edu-export-dialog>
  </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
import subjectCompetitionApi from 'common/src/api/subjectCompetition/subjectCompetition';
export default {

  data() {
    return{
      formList: new FormData(),
      dataFormList: {}, //接收路由跳转的数据
      dataForm: {

      }, //表格数据
      internship: {
        opinion: ''
      },
      indexKey: 1,
      queryFormRmport: {
        calendarId: '',
        enclosureFileName: '',
        enclosureFileUrl: '',
        calendarName: ''
      },
      queryFormRmportId: '',
      queryCalendarName: '',
      dataList: [],
      fileList: [],
      exportButton: false,
      listRmportVisible: false,
      englishScoreManage: {
        cet4ScoreExcellent: ''
      },
      options: {
        faculty: []
      },
      dialogVisible: false,
      outsideAdvisorId: '',
      curCheckStandard: '',
      curPracticeId: '',
      queryForm: {
        condition: {
          calendarId: '',
          student: '',
          examCategory:3
        },
        pageNum_: 1,
        pageSize_: 20,
        total_: 0,
      },
      calendarName: '',
      useConfigParamList: '',
      useConfigParam: '',
      rulesRmport: {
        enclosureFileName: [
          { required: true, message: this.$t('internship.attachment'), trigger: 'change' }
        ],
        calendarId: [
          { required: true, message: this.$t('internship.pleaseSelect'), trigger: 'change' }
        ],
      },
      rules: {
        cet4ScoreExcellent: [
          { required: true, validator: this.validateWeight, trigger: 'blur' }
        ],
        english4PassScore: [
          { required: true, validator: this.validateWeight, trigger: 'blur' }
        ],
        elish6PassScore: [
          { required: true, validator: this.validateWeight, trigger: 'blur' }
        ],
        cet6ScoreExcellence: [
          { required: true, validator: this.validateWeight, trigger: 'blur' }
        ]
      },
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.englishScoreManage.timeEnd;
          if (endDateVal) {
            // return time.getTime() > endDateVal;
            return time.getTime() >= new Date(endDateVal).getTime();
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.englishScoreManage.time;
          if (beginDateVal) {
            // return time.getTime() < beginDateVal;
            return time.getTime() <= new Date(beginDateVal).getTime()- 86400000;
          }
        }
      },
      semester: [],
      semesterRmpor: [],
      multipleSelection: [],
      tableData: []
    }
  },
  filters: {
    collegeAcademyList(val, array) {
      let str = "";
      for (let item of array) {
        if (val === item.value) {
          str = item.label;
        }
      }
      return str;
    }
  },
  mounted() {
    this.getOptions();
    this.getQueryPractice();
  },
  created() {

  },
  methods: {
    onSubmit() {
      this.queryForm.pageNum_ = 1
      this.getQueryPractice();
    },
    // 校验
    validateWeight(rule, value, callback) {
      let expReg = /^([1-9]|[1-9]\d{1,2})(\.\d{1,2})?$/;
      // let expReg = /^([1-9][0-9]*){1,3}(\.\d{2})?$/;
      if (!value) {
        callback(new Error(this.$t('internship.pleaseEnter')));
      } else if (!expReg.test(value)) {
        callback(new Error(this.$t('englishScoreManage.pleaseEnter')))
      } else {
        callback();
      }
    },
    // 学期学年
    loadDone(data, val) {
      // this.semester = data;
      this.queryForm.condition.calendarId = val
      this.useConfigParamList = val;
      // this.semester.forEach(el => {
      //   if (el.id === val) {
      //     this.queryForm.condition.calendarName = el.fullName;
      //     this.calendarName = el.fullName;
      //     this.useConfigParamList = val;
      //   }
      // });
      // this.postInternshipSet(this.queryForm);
    },
    changeInput(val) {
      // this.semester.forEach(el => {
      //   if (el.id === val) {
      //     this.queryForm.condition.calendarName = el.fullName;
      //   }
      // });
    },
    getSchoolCalendar() {
      graduateStudent.schoolCalendar().then(res => {
        this.semesterRmpor = res.data;
        this.semesterRmpor.forEach(el => {
          if (el.id === this.queryFormRmportId) {
            this.queryFormRmport.calendarName = el.fullName;
            this.queryCalendarName = el.fullName;
            this.queryFormRmport.useConfigParam = this.queryFormRmportId;
          }
        });
      });
    },
    loadDoneRmport(data, val) {
      // this.semesterRmpor = data;
      this.queryFormRmport.calendarId = val
      this.queryFormRmportId = val;
      // this.semesterRmpor.forEach(el => {
      //   if (el.id === val) {
      //     this.queryFormRmport.calendarName = el.fullName;
      //     this.queryCalendarName = el.fullName;
      //     this.queryFormRmportId = val;
      //   }
      // });
    },
    changeInputRmport(val) {
      // this.semesterRmpor.forEach(el => {
      //   if (el.id === val) {
      //     this.queryFormRmport.calendarName = el.fullName;
      //   }
      // });
    },

    getQueryPractice() {
      subjectCompetitionApi.postComputerManagement(this.queryForm).then(res => {
        // console.log(res, 'sdfds');
        this.dataList = res.data.list
        this.queryForm.total_ = res.data.total_
      });
    },
    // 导入
    exportLead() {
      // this.getSchoolCalendar();
      this.queryFormRmport.calendarId = this.queryFormRmportId
      this.listRmportVisible = true;
    },
    // 勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_YX", 'G_XBIE', "JDJB",]
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            faculty: "X_YX",
            degreeType: "JDJB",
            sex:"G_XBIE"
          },
          res.data,
          this.options
        );
        // console.log(this.options);

      });
    },
    // 筛选
    onSearch() {
      this.queryForm.pageNum_ = 1
      this.getQueryPractice();
    },
    // 重置
    resetSearch() {
      this.queryForm.condition.student = ''
      this.queryForm.condition.calendarId = this.useConfigParamList;
      this.queryForm.pageNum_ = 1
      this.getQueryPractice();
    },
    // 导入取消
    cancelRmport() {
      this.$refs['queryFormRmport'].resetFields();
      this.fileList = [];
      // console.log(this.queryFormRmport);
      this.formList = new FormData();
      this.queryFormRmport.enclosureFileName = '';
      this.listRmportVisible = false;
    },
    // 上传之前
    handleChange(file) {
      if (!file.name.endsWith(".xlsx") && !file.name.endsWith(".xls")){
        this.fileList = [];
        this.formList = new FormData();
        return this.$message.warning(this.$t('cetStatistics.formatError'))
      }
      this.queryFormRmport.enclosureFileName = 'a';
    },
    // 删除
    handleRemove() {
      this.queryFormRmport.enclosureFileName = '';
      this.formList = new FormData();
      this.fileList = [];
    },
    // 上传成功
    handleSuccess(res, file, fileList) {
      // console.log(res, file, fileList, '1212');

      let isSuccess = (res.code == 200);
      this.$message({
          type: isSuccess ? "success":"error",
          message: res.msg
      });
      // this.setInformationAttachList(fileList);
    },
    setInformationAttachList(fileList) {
      let attachList = [];
      fileList.forEach(item => {
        if (item.response && item.response.data) {
          const uploadedObj = item.response.data[item.name];
          if (uploadedObj) {
            this.queryFormRmport.enclosureFileName = uploadedObj.fileName;
            this.queryFormRmport.enclosureFileUrl = uploadedObj.objectkey;
          }
        }
      });
    },
    changeRequest(file) {
      this.formList.append("file", file.file);
    },
    // 导入确定
    reliableRmport() {
      this.$refs['queryFormRmport'].validate((valid) => {
        if (valid) {
          // console.log(this.queryFormRmport);
          this.$refs.uploadLead.submit();
          this.formList.append("calendarId", this.queryFormRmport.calendarId);
          this.formList.append("educationTag", Number(this.$store.getters.getProjectId()));
          this.formList.append("examCategory", 3);
          subjectCompetitionApi.postComputerRmport(this.formList).then(() => {
            this.$message.success(this.$t('studentsRegist.successfully'));
            this.formList = new FormData();
            this.fileList = [];
            this.listRmportVisible = false;
            this.queryForm.pageNum_ = 1
            this.getQueryPractice();
          }).catch(() =>{
            this.formList = new FormData();
            this.fileList = [];
            this.queryFormRmport.enclosureFileName = '';
            // this.listRmportVisible = false;
          });
        }
      });
    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val
      this.queryForm.pageNum_ = 1
      this.getQueryPractice();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum_ = val
      this.getQueryPractice();
    },
    goBack() {
      this.$store.commit("delete_tabs", this.$route.path);
      this.$router.go(-1);
    },
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.p_cals:hover{
  cursor: pointer;
  color: #409eff;
}
.p_cals{
  color: #aaa
}
.inner-breadcrumb {
    .breadcrumb {
        span {
            font-weight: normal;
            color: #aaa;
        }
        a {
            font-weight: normal;
            color: #aaa;
        }
        a:hover {
            color: #409eff;
        }
        .last {
            font-weight: bold !important;
            cursor: default !important;
        }
        .disable {
            cursor: default !important;
        }
    }
}
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}

.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}

.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}

.text-left-background-none {
    text-align: left;
}
</style>
